/**
 * Created by Administrator on 2016/9/6.
 */
define(['jquery'],function(){
     $(function() {
          var oBtn = $$('button').getElementsByTagName('i');
          var oUl=$$('box').getElementsByTagName('ul')[0];
          var oLi=oUl.getElementsByTagName('li');
          oUl.innerHTML+=oUl.innerHTML;
          oUl.style.width=oLi.length*oLi[0].offsetWidth+'px';
          var num=0;

          for (var i = 0; i < oBtn.length; i++) {
               oBtn[i].index = i;
               oBtn[i].onmouseover = function () {
                    clearInterval(timer);
                    start(this.index);
               };
               $$('leftButton').onmouseover= $$('rightButton').onmouseover=$$('button').onmouseover=oLi[i].onmouseover=function()
               {
                    clearInterval(timer);
               };
               $$('leftButton').onmouseout= $$('rightButton').onmouseout=$$('button').onmouseout=oLi[i].onmouseout=function()
               {
                    clearInterval(timer);
                    timer=setInterval(startRoll,3000);
               }
          }
          /****************************************************************/
          var timer=null;
          clearInterval(timer);
          var timer=setInterval(startRoll,3000);
          function startRoll()//这是自动播放部分
          {
               num++;
               var oUl=$$('box').getElementsByTagName('ul')[0];
               var oLi=oUl.getElementsByTagName('li');
               var oBtn = $$('button').getElementsByTagName('i');

               if(num==(oLi.length/2+1))
               {
                    oUl.style.left='0';
                    num=0;//当图片移动到来末尾重复的图片时，让left等与0
                    if(num==0)
                    {
                         oUl.style.left='-748';
                         num=1;//当图片移动到第一个重复的图片时，让left等于-1200
                    }

               }
               startMove(oUl,'left',-(num)*748);
               /************按钮变化****************************************************/
                    //alert(aButton.length);
               clear();
               //清除页面所有按钮状态颜色
               if(num==oBtn.length){
                   // alert(1);
                    oBtn[0].className="chose_box";//当num是5的时候让第一个按钮变色
               }else{
                    oBtn[num].className="chose_box";
               }
          };
          /****************************************************************/
          function start(tmp)
          {
               var oUl=$$('box').getElementsByTagName('ul')[0];
               var oLi=oUl.getElementsByTagName('li');
               var oBtn = $$('button').getElementsByTagName('i');
               for(var j=0;j<oLi.length/2;j++)
               {
                    if(tmp==j)
                    {
                         startMove(oUl,'left',-(tmp)*748);

                    }
               }
               num = tmp;
               /************按钮变化****************************************************/
                    //alert(aButton.length);
               clear();
               //清除页面所有按钮状态颜色
               if(num==oBtn.length){
                    oBtn[0].className="chose_box";//当num是5的时候让第一个按钮变色
               }else{
                    oBtn[num].className="chose_box";
               }
          }
          /**********向左移动***********************************************/
          $$('leftButton').onclick=function()
          {
               clearInterval(timer);
               var oUl=$$('box').getElementsByTagName('ul')[0];
               var oLi=oUl.getElementsByTagName('li');
               num--;
               if(num>=0)
               {
                    startMove(oUl,'left',-(num)*748);
               }else
               if(num<0)
               {
                    //当图片移动到开始第一张图片，让left移动到第6张图片处
                    oUl.style.left=-5236+'px';
                    num=oLi.length/2;
                    if(num==oLi.length/2)
                    {
                         num=(oLi.length/2)-1;
                         startMove(oUl,'left',-(num)*748); //当图片移动到第6张图片处时，使用运动框架将图向左缓动一个图片
                    }
               }
               /************按钮变化****************************************************/
                    //alert(aButton.length);
               clear();
               //清除页面所有按钮状态颜色
               if(num==oBtn.length){
                    oBtn[0].className="chose_box";//当num是5的时候让第一个按钮变色
               }else{
                    oBtn[num].className="chose_box";
               }

          };
          /************向右移动****************************************************/
          $$('rightButton').onclick=function()
          {
               clearInterval(timer);
               var oUl=$$('box').getElementsByTagName('ul')[0];
               var oLi=oUl.getElementsByTagName('li');
               num++;
               if(num<=oLi.length/2)
               {
                    startMove(oUl,'left',-(num)*748);
               }else
               if(num>oLi.length/2)
               {
                    //当图片移动到开始第一张图片，让left移动到第6张图片处
                    oUl.style.left=0+'px';
                    num=0;
                    if(num==0)
                    {
                         num=1;
                         startMove(oUl,'left',-(num)*748); //当图片移动到第6张图片处时，使用运动框架将图向左缓动一个图片
                    }
               }
               /************按钮变化****************************************************/
                    //alert(aButton.length);
               clear();
               //清除页面所有按钮状态颜色
               if(num==oBtn.length){
                    oBtn[0].className="chose_box";//当num是5的时候让第一个按钮变色
               }else{
                    oBtn[num].className="chose_box";
               }
          };
 /*******************************以下是当页面切换时，停止或开始轮播计时器**************************************/
          window.onblur = blurMe;
          window.onfocus = focusMe;

          function blurMe() {
               clearInterval(timer);
          }
          function focusMe() {
               timer=setInterval(startRoll,3000);
          }
     });
    /* $(document).ready(function(){

          window.onblur = blurMe;
          window.onfocus = focusMe;

          function blurMe() {
               clearInterval(timer);
          }

          function focusMe() {
               timer=setInterval(startRoll,3000);
          }

     });*/

//清除页面所有按钮状态颜色
     function clear(){
          var aButton=$$("button").getElementsByTagName('i');
          for(var i=0;i<aButton.length;i++){
               aButton[i].className="chose_box_change";//红色
          }
     }



/*以下是运动框架*/
     function $$(id)//根据ID获取到指定的元素
     {
          return document.getElementById(id);
     }
          function startMove(obj,attr,iTarget,fnEnd)//运动框架
          {
               //alert(1);
               clearInterval(obj.timer);
               obj.timer=setInterval(function()
               {
                    var cur=0;
                    if(attr=='opacity')
                    {
                         cur=Math.round(parseFloat(getStyle(obj,attr))*100);
                    }else
                    {
                         cur=parseInt(getStyle(obj,attr));
                    }
                    var speed=(iTarget-cur)/6;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);

                    if(cur==iTarget)
                    {
                         clearInterval(obj.timer);
                         if(fnEnd)fnEnd();
                    }else
                    {
                         if(attr=='opacity')
                         {
                              obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                              obj.style.opacity=(cur+speed)/100;
                         }else
                         {
                              obj.style[attr]=cur+speed+'px';
                         }
                    }

               },30)

          }

          /****************************************************************************/
          function getStyle(obj,name)   //这个框架是获取行间样式。
          {
               if(obj.currentStyle)
               {
                    return obj.currentStyle[name];
               }else
               {
                    return getComputedStyle(obj,false)[name];
               }
          }
});